<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="css/siderbar.css">
    <link rel="stylesheet" href="toastr/toastr.min.css">
    <link rel="shortcut icon" href="images/bitbug_favicon.ico">
    <link href="pace/themes/blue/pace-theme-minimal.css" rel="stylesheet" />

    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="bootstrap-table/bootstrap-table.js"></script>
    <script src="bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="js/test.js"></script>
    <script src="js/fontawesome-all.js"></script>
    <script src="toastr/toastr.js"></script>
    <script src="pace/pace.js"></script>
</head>
 <body >
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog <!--modal-dialog-centered-->" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h5>Popover in a modal</h5>
                <p>This <a href="#" role="button" data-toggle="popover" class="btn btn-secondary popover-test"
                           title="Popover title" data-content="Popover body content is set in this attribute.">button</a>
                    triggers a popover on click.</p>
                <hr>
                <h5>Tooltips in a modal</h5>
                <p><a href="#" data-toggle="tooltip" class="tooltip-test" title="Tooltip">This link</a> and
                    <a href="#" data-toggle="tooltip" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

    <header class="navbar navbar-expand-md navbar-light bg-light fixed-top" id="my-nav">
        <a class="navbar-brand" href="#"><img id="my-brand" src="images/logoZ.png" ></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenav" >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="collapsenav">
            <!--
            <i class="fa fa-angle-down float-right"></i>
            <i class="fa fa-angle-down float-right"></i>
            <i class="fa fa-angle-down float-right"></i>
            <i class="fa fa-angle-down float-right"></i>
-->
            <ul id="left-nav" class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <label  class="animate"><a href="#" class="nav-link dropdown-link" style="padding: 0;">首页</a></label>
                    <!--<ul id="toggle3" class="dropdown-menu my-dropdown">
                        <li class="animate"><a href="#" class="nav-link dropdown-link" style="padding: 0;">JAVA<i class="fa fa-film float-right"></i></a></li>
                        <li class="animate">CSS<i class="fa fa-music float-right"></i></li>
                        <li class="animate">IDEA<i class="fa fa-cog float-right"></i></li>
                    </ul>-->
                </li><li class="nav-item dropdown">
                <label for="toggle4" class="animate">文章</label>
                <ul id="toggle4" class="dropdown-menu my-dropdown">
                    <li class="animate"><a href="#" class="nav-link dropdown-link" style="padding: 0;">JAVA<i class="fa fa-film float-right"></i></a></li>
                    <li class="animate">CSS<i class="fa fa-music float-right"></i></li>
                    <li class="animate">IDEA<i class="fa fa-cog float-right"></i></li>
                </ul>
            </li><li class="nav-item dropdown">
                <label for="toggle5" class="animate">编程</label>
                <ul id="toggle5" class="dropdown-menu my-dropdown">
                    <li class="animate"><a href="#" class="nav-link dropdown-link" style="padding: 0;">设计模式<i class="fa fa-film float-right"></i></a></li>
                    <li class="animate">算法<i class="fa fa-music float-right"></i></li>
                    <li class="animate">IDEA<i class="fa fa-cog float-right"></i></li>
                </ul>
            </li>
                <li class="nav-item dropdown">
                    <label for="toggle1" class="animate">工具</label>
                    <ul id="toggle1" class="dropdown-menu my-dropdown">
                        <li class="animate"><a href="#" class="nav-link dropdown-link" style="padding: 0;">IDEA<i class="fa fa-film float-right"></i></a></li>
                        <li class="animate">CSS<i class="fa fa-music float-right"></i></li>
                        <li class="animate">IDEA<i class="fa fa-cog float-right"></i></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <label for="toggle2" class="animate">娱乐<i class="fa fa-list float-right" style="text-align: center;
    margin-top: .3rem;
    margin-bottom: 0;
    margin-left: .5rem;"></i></label>
                    <ul id="toggle2" class="dropdown-menu my-dropdown">
                        <li class="animate"><a href="#" class="nav-link dropdown-link" style="padding: 0;">电影<i class="fa fa-film float-right"></i></a></li>
                        <li class="animate">音乐<i class="fa fa-music float-right"></i></li>
                        <li class="animate">动漫<i class="fa fa-cog float-right"></i></li>
                    </ul>
                </li>
            </ul>
            <ul id="right-nav" class="navbar-nav ml-auto">

                <li class="nav-item dropdown"  >
                    <label for="toggle1" class="animate"  data-toggle="modal" data-target="#exampleModal">登录<i class="fa
                    fa-sign-in-alt my-login" >

                    </i></label>
                  <!--  <a class="nav-link" href="#" data-toggle="modal" data-target="#exampleModal"
                       style="text-align: center">登录<i class="fa
                    fa-sign-in-alt my-login" >

                    </i></a>-->
                </li>
            </ul>
        </div>
    </header>
   <!-- 福利在此-->
<div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='my-card bg-01'>
                <span class='card-content'>测试45456465</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='my-card bg-02'>
                <span class='card-content'>测试45456465999999999</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='my-card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='my-card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='my-card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='my-card bg-06'>
                <span class='card-content'><i class="fas fa-angle-up"></i></span>
            </div>
        </a>
    </div>
</div>
<div class="container-fluid" >
   <!-- <div class="row ">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Library</li>
            </ol>
        </nav>
    </div>-->
    <div class="row">
    <div class=" d-none bd-toc  col-lg-3 col-xl-2 " id="test">
        <div class="row ">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb my-bread" >
                    <li class="breadcrumb-item"><a href="#"> 首页</a></li>
                    <li class="breadcrumb-item" aria-current="page"><a href="#">文章</a></li>
                    <li class="breadcrumb-item active" aria-current="page">测试文章</li>
                </ol>
            </nav>
        </div>
        <ul class="section-nav ">
            <li class="toc-entry toc-h2"><a href="#how-it-works">How it works</a></li>
            <li class="toc-entry toc-h2"><a href="#example">Example</a></li>
            <li class="toc-entry toc-h2"><a href="#multiple-targets">Multiple targets</a></li>
            <li class="toc-entry toc-h2"><a href="#accordion-example">Accordion example</a></li>
            <li class="toc-entry toc-h2"><a href="#accessibility">Accessibility</a></li>
            <li class="toc-entry toc-h2"><a href="#usage">Usage</a>
                <ul>
                    <li class="toc-entry toc-h3"><a href="#via-data-attributes">Via data attributes</a></li>
                    <li class="toc-entry toc-h3"><a href="#via-javascript">Via JavaScript</a></li>
                    <li class="toc-entry toc-h3"><a href="#options">Options</a></li>
                    <li class="toc-entry toc-h3"><a href="#methods">Methods</a>
                        <ul>
                            <li class="toc-entry toc-h4"><a href="#asynchronous-methods-and-transitions">
                                Asynchronous methods and transitions</a></li>
                            <li class="toc-entry toc-h4"><a href="#collapseoptions">.collapse(options)</a></li>
                            <li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
                            <li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
                            <li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
                            <li class="toc-entry toc-h4"><a href="#collapsedispose">.collapse('dispose')</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry toc-h3"><a href="#events">Events</a></li>
                </ul>
            </li>
        </ul>

    </div>
        <div class=" col-lg-9 col-xl-10 " id="content">
            <!--<div id="my-header" style="height: 20px"><h1>标题测试1</h1></div>-->
            <div data-spy="scroll" data-target="#test" data-offset="0" class="scrollspy-example">
                <h4 id="how-it-works">Item 1</h4>
                <p>...</p>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                vr<br/>
                <br/>
                <h4 id="example">Item 2</h4>
                <p>...</p>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>
                vc<br/>

                <h4 id="multiple-targets">Item 3</h4>
                <p>...</p>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                vd<br/>
                <h4 id="accordion-example">Item 4</h4>
                <p>...</p>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                vf<br/>
                fgdjokgjdgkldgj
            </div>
        </div>
</div>

</div>
 <footer class="my-footer">
     <!--<div class="col-12" style="height: 30px;padding-top: 30px;padding-left: 44%;">
         <h6 style="align-content: center">&copy;lgdong.xyz</h6>
     </div>-->
     <div class="container-fluid text-center my-foot">
     <div class="row" >
         <div class="col-md-4 foot">
             <img src="images/logo.png" alt="no image">
             <hr class="light">
             <p>111-111-111</p>
             <p>test@test.com</p>
             <p>sichuan</p>
         </div>

         <div class="col-md-4 foot">
             <hr class=" light">
             <h3>test1</h3>
             <hr class=" light">
             <p>111-111-111</p>
             <p>test@test.com</p>
             <p>sichuan</p>
         </div>

         <div class="col-md-4 foot">
             <hr class=" light">
             <h3>test2</h3>
             <hr class=" light">
             <p>111-111-111</p>
             <p>test@test.com</p>
             <p>sichuan</p>
         </div>
         <div class="col-12">
             <hr class="light-100">
             <h5>&copy;2018 lgdong.All rights reserved.</h5>
         </div>
     </div>
     </div>
 </footer>
 </body>
</html>